<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
      <div class="wp">
        <div>
            <%if(!name){%>
            <a href="/login">登陆</a>|<a href="/register">注册</a>
            <%}else{%>
            <span><%=name%></span><a href="/user/logout">退出</a>
            <%}%>
        </div>
        <div class="comment-post row">
            <textarea class="comment-text fl" placeholder="说点什么吧！" name="content"></textarea>
            <button class="comment-btn fr">评论</button>
        </div>
        <div class="comment-list" data-pid="563">
            <ul class="tab row">
                <li class="cur">最新评论（<span><%=length%></span>）</li>
            </ul>
            <div class="comments-dom">
                <!--<div class="comments-loading" style="display: none;"><img src="/static/website/images/loading.gif" alt="正在加载 - 悦读FM"> 正在加载……</div>-->
                <ul class="comments-list">
                    <%if(!datas.length){%>
                    <li>暂无评论</li>
                    <%}else{%>
                    <%datas.forEach(function(data){%>
                    <!--评论列表-->
                    <li>
                        <div class="comment-avatar fl">
                            <a href="javascript:;" target="_blank">
                                <img src="http://yuedu.fm/static/file/member/defaultuser">
                            </a>
                        </div>
                        <div class="comment-c">
                            <div class="comment-meta">
                                <%if(name==data.name){%>
                                <a href="javascript:;" class="fr comment-delete" data-id="<%=data.id%>">x</a>
                                <%}%>
                                <a href="javascript:;" class="comment-user" target="_blank"><%=data.name%></a>
                                <span><%=data.time%></span>
                            </div>
                            <div class="comment-p"><%=data.content%></div>
                        </div>
                    </li>
                    <%})}%>
                </ul>
            </div>
        </div>
    </div>
    <script src="/js/jquery-2.1.4.min.js"></script>
    <script>
$(function(){
    // 检测用户是否登录
    function checkLogin(callback){
        $.getJSON('/check',function(data){
            callback(data.exist);
        })
    }
    $('.comment-btn').on('click',function(){
        checkLogin(function(data){      //接收 data.exist
            if(data == '0'){      //若exist=0;表示未登陆
                alert('请登录');  //让用户先登录 
            }else if($('.comment-text').val()!=''){ //如果留言框的内容不为空，才执行ajax的内容
                //获取到textarea的内容
                var content = $('.comment-text').val();
                $.ajax({
                    url : '/comment', //请求接口
                    type : 'post',    //方法由前后端交流得出
                    dataType : 'json',
                    data : {
                        content : content
                    },
                    success : function(data){
                        if(data.status == 'success'){
                            //获取到‘最新评论’区域的统计数字
                            var count = $('.cur').children().html();

                            //获取到接收数据
                            var result =  data.result;
                            //数据接收成功之后，渲染到页面上。渲染过程如下：
                            var html =  '<li><div class="comment-avatar fl">' +
                                        '<a href="javascript:;" target="_blank">' +
                                        '<img src="http://yuedu.fm/static/file/member/defaultuser"></a></div>' +
                                        '<div class="comment-c"><div class="comment-meta">' +
                                        '<a href="javascript:;" class="fr comment-delete" data-id="'+result.id+'">x</a>'+
                                        '<a href="/user/6255/" class="comment-user" target="_blank">'+result.name+'</a>' +
                                        '<span>'+result.time+'</span></div>' +
                                        '<div class="comment-p">'+result.content+'</div></div></li>';
                            //把新生成的评论插入到评论区的前边，符合按时间更新的规则。
                            
                            if(count==0){
                            	$('.comments-list').html(html);
                            }else{
                            	$('.comments-list').prepend(html);
                            }
                            //将上边获取到的评论区数量加一，再赋值给评论数量的html
                            $('.cur').children().html(++count);
                            //同时清空评论板
                            $('.comment-text').val('');
                        }else{
                            alert('评论失败！')
                        }
                    },
                    //  将数据发送到后台之前要将'评论'按钮禁用,同时加上none的类名，即让按钮变灰
                    beforeSend : function(){
                        $('.comment-btn').html('评论中···').addClass('none').attr('disabled',true);
                    },
                    //数据发送到后台时，让‘评论’按钮恢复原来的状态，并解除禁用
                    complete : function(){
                    	$('.comment-btn').html('评论').removeClass('none').attr('disabled',false);
                    }
                })
            }
        })	
    })
	//------------------删除功能---------------------------
	$(document).on('click','.comment-delete',function(){
		var id = $(this).data('id');	//	先获取到
		var _this = $(this);
		$.ajax({
			url : '/comment/del',
			type : 'post',
			dataType : 'json',
			data : {
				id : id
			},
			success : function(data){
				var count = $('.cur').children().html();
				if(data.status == 'success'){
					_this.parents('li').remove();
					$('.cur').children().html(--count);
					if(count == 0){
						$('.comments-list').prepend('<li>暂无评论</li>');
					}
				}else{
					alert('删除失败!')
				}
			}
		})
	})
	// -------------------删除功能结束-----------------------------
})
       
    </script>
</body>
</html>
